<template>
  <div id="container">
    <h1>我是test组件</h1>
    {{ init }} {{ init2 }}
    <hr />
    <ul style="height: 50px; overflow: hidden">
      <li v-for="item in books" :key="item.id">
        名字： {{ item.bookname }},作者：{{ item.author }},出版社：{{
          item.publisher
        }}
      </li>
    </ul>
    <div id="opdom">操作dom</div>
    <button @click="changedata">更改数据</button>
    <div ref="dataupdate">{{ dataupdate }}</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: "你好",
      books: [],
      dataupdate: 0,
    };
  },
  props: ["init", "init2"],
  methods: {
    changedata() {
      this.dataupdate++;
    },
    initBookList() {
      var that = this;
      const xhr = new XMLHttpRequest();
      xhr.addEventListener("load", function () {
        const { data: res } = JSON.parse(xhr.responseText);
        that.books = res; //这里一定要注意函数this的指向问题
      });

      xhr.open("get", "http://www.liulongbin.top:3006/api/getbooks");
      xhr.send();
    },
  },
  beforeCreate() {
    // console.log(this.init);
  },
  created() {
    this.initBookList();
    //经常在这里发送ajax请求
    //不能操作dom
  },
  beforeMount() {},
  mounted() {
    const dom = document.querySelector("#opdom");
    console.log(dom);
    //在这里可以最早操作dom。已经将内存的dom结构渲染到页面了
  },
  beforeUpdate() {
    //数据更新但是页面dom还没有更新
  },
  updated() {
    console.log(this.$refs.dataupdate.innerHTML); //$ref不能写成ref，并且要用this访问
    //数据更新渲染dom完成后
  },
};
</script>


<style  scoped>
#container{
  background-color: chocolate;
  height: 200px;
}
</style>